<template>
    <div class="zhuzti">
        <div class="header">
            <router-link to="/search">
                <van-search placeholder="搜索商品" background="#f4f4f4" />
            </router-link>
            <div class="tubiao">
                <van-icon name="apps-o" />
                <van-icon name="orders-o" />
                <van-icon name="shopping-cart-o" />
            </div>
        </div>

        <div class="main">
            <ul class="xuan">
                <router-link v-for="item in list" :to="{ path: '/list', query: { tab: item.tab, til: item.til } }">
                    <li>
                        <img :src="item.src" alt="">
                        <p>{{ item.til }}</p>
                    </li>
                </router-link>
            </ul>
            <div class="seck">
                <div class="seckill">
                    <router-link to="/signIn">
                        <b>每日签到</b>
                    </router-link>
                    <p>得微币</p>
                    <van-icon name="https://wimg.588ku.com/gif/21/05/07/1b40f8b2ad85135de3fdfe9c84591943.gif" />
                </div>
                <div class="seckill">
                    <b>限时秒杀</b>
                    <p>福利购</p>
                    <van-icon name="https://wimg.588ku.com/gif/20/09/21/0e6e63e60be7c25339938be48f45cfb3.gif" />
                </div>
                <div class="seckill">
                    <b>0元夺宝</b>
                    <p>免费领1</p>
                    <van-icon name="https://wimg.588ku.com/gif/21/01/25/96d9df4f6f5e22ec95df9c5a4731585b.gif" />
                </div>
            </div>
            <ul class="content">
                <li v-for="item in getNewList">
                    <img :src="item.img" alt="">
                    <p> {{ item.title }}</p>
                    <div class="hezi">
                        <span>￥{{ item.price }}</span>
                        <span>￥{{ item.old_price }}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

import { Toast, } from 'vant';
import { newHome } from './api'
export default {
    data() {
        return {
            getNewList: [],
            list: [
                {
                    til: '钓竿',
                    tab: 'diaogan',
                    src: require("../../assets/img/images-home/1_03.jpg")
                },
                {
                    til: '线组',
                    tab: 'xian',
                    src: require('../../assets/img/images-home/1_10.jpg')
                },
                {
                    til: '浮漂',
                    tab: 'fu',
                    src: require('../../assets/img/images-home/1_05.jpg')
                },
                {
                    til: '饵料药',
                    tab: 'er',
                    src: require('../../assets/img/images-home/1_07.jpg')
                },
                {
                    til: '钓鱼灯',
                    tab: 'deng',
                    src: require('../../assets/img/images-home/1_13.jpg')
                },
                {
                    til: '抄网',
                    tab: 'chao',
                    src: require('../../assets/img/images-home/1_23.jpg')
                },
                {
                    til: '钓箱椅',
                    tab: 'yi',
                    src: require('../../assets/img/images-home/1_25.jpg')
                },
                {
                    til: '防护',
                    tab: 'fang',
                    src: require('../../assets/img/images-home/1_21.jpg')
                },
                {
                    til: '户外',
                    tab: 'wai',
                    src: require('../../assets/img/images-home/1_28.jpg')
                },
                {
                    til: '所有分类',
                    tab: 'all',
                    src: require('../../assets/img/images-home/1_29.jpg')
                },
            ]
        };
    },

    mounted() {
        this.newHome();
    },

    methods: {
        newHome() {
            newHome().then(res => {
                this.getNewList = res.data
                console.log(res, "newHome");
            })
        },
    },
};
</script>

<style scoped lang="scss">
* {
    padding: 0;
    margin: 0;
}

.zhuzti {
    background: #f4f4f4;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .van-search {
        background-color: #fff;
    }

    .van-search__content {
        background: #fff;
    }

    .tubiao {
        display: flex;
        align-items: center;
        width: 30%;
        justify-content: space-between;

        .van-icon {
            font-size: 20px;
        }
    }
}

.main {
    margin: 15px;

    .xuan {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        background: #fff;
        padding: 10px;
        padding-top: 0;
        margin-top: -10px;

        li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                width: 30px;
                height: 30px;
                padding: 15px;
            }

            p {
                font-size: 12px;
                color: #767676;
            }
        }
    }

    .seck {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;

        .seckill {
            background: #fff;
            padding: 10px 20px 5px 20px;
            position: relative;
            height: 70px;

            b {
                font-size: 18px;
                color: #484848;
            }

            p {
                font-size: 12px;
                color: #c9c9c9;
            }

            .van-icon {
                font-size: 50px;
                position: absolute;
                right: 5px;
                bottom: 5px;
            }
        }
    }

    .content {
        display: flex;
        flex-wrap: wrap;

        li {
            width: 48%;
            height: 330px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            background: #fff;
            margin-left: 6px;
            margin-bottom: px;
            margin-top: 10px;

            img {
                width: 100%;
                height: 100%;
            }

            p {
                font-size: 12px;
                color: #303030;
            }

            .hezi {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                span {
                    color: #363636;
                    font-size: 16px;
                }

                span:nth-of-type(2) {
                    font-weight: normal;
                    text-decoration: line-through;
                    color: #979797;
                    font-size: 14px;
                }

            }

        }

    }


}
</style>